<template>
	<view class="poster-list-main">
		<block v-if="posterList.length">
			<view class="poster-list">
				<view class="poster-list-item" v-for="(data,index) in posterList" :key="index">
					<image class="picture" :src="data.image" mode="aspectFill"></image>
					<view class="poster-item-info">
						<view class="poster-item-info-text">
							<view class="poster-list-item-tit">{{data.user.nickname?data.user.nickname:'未设置用户名'}}</view>
							<view class="poster-list-item-phone">{{data.user.phone}}</view>
							<view class="poster-list-item-tips">扫码/长按识别二维码</view>
						</view>
						<image class="code" :src="QrSrc"></image>
					</view>
					<button @click="saveImg(data.image,data.user.nickname,data.user.phone)">保存图片</button>
					<button @click="delPoster(data.poster_id)" class="del">删除</button>
				</view>
			</view>
			<no-more :text="'数据加载完毕'" v-if="posterList.length && noMore"></no-more>
			<canvas canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px'}" class="canvas"></canvas>
			<view class="btn"><button type="primary" @click="goAddPost">新增海报</button></view>
		</block>
		<block v-else>
			<nothing :text="'暂无海报'" :btnTxt="'立即添加'" @goUrl="goAddPost"></nothing>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				QrSrc: '',
				page: 0,
				noMore: false,
				posterList: [],
				canvasW: '',
				canvasH: '',
				ViewDetails: '扫码/长按识别二维码'
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.noMore = false
			this.posterList = []
			this.init()
		},
		methods: {
			// 初始化列表
			init(page){
				this.$api.PosterLists({
					limit: 10,
					page: page?page:0,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					client_type: 2
				}).then(res => {
					this.$api.GetQRcode().then(res => {
						this.QrSrc = res.datas
					})
					if(res.datas.length){
						res.datas.forEach(item => {
							this.posterList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			// app跳转添加海报
			onNavigationBarButtonTap(e){
				uni.navigateTo({
					url: '/pages/custom-poster/custom-poster'
				})
			},
			// 跳转添加海报
			goAddPost(){
				uni.navigateTo({
					url: '/pages/custom-poster/custom-poster'
				})
			},
			// 绘制canvas
			async OnCanvas(img,nickname,phone) {
				console.log(img,nickname,phone)
				let _this = this;
				_this.ctx = uni.createCanvasContext('CanvasID',this);
				const systemInfo = uni.getSystemInfoSync()
				const _imgInfo = await _this.getImageInfo({ imgSrc: img }); // 背景图
				const _QrCode = await _this.getImageInfo({ imgSrc: _this.QrSrc }); //二维码
				_this.canvasW = systemInfo.windowWidth - uni.upx2px(200);
				if(systemInfo.platform==='android'){
					_this.canvasH = systemInfo.windowHeight - 265;
				}else{
					_this.canvasH = systemInfo.windowHeight - 215;
				}
				
				_this.ctx.setFillStyle('#FFFFFF');
				_this.ctx.fillRect(0,0,_this.canvasW,_this.canvasH)
				
				//添加图片展示
				_this.ctx.drawImage(_imgInfo.path, 0, 0, _this.canvasW, uni.upx2px(570));
				//添加图片展示 end
				
				let top = uni.upx2px(30),
						left = uni.upx2px(350);
				
				if(systemInfo.platform==='ios'){
					top = uni.upx2px(20)
				}
				
				// #ifdef H5
				top = uni.upx2px(80)
				// #endif
				
				//添加二维码
				_this.ctx.drawImage(_QrCode.path, left,uni.upx2px(570) + top, uni.upx2px(160), uni.upx2px(160));
				//添加二维码 end
				
				_this.ctx.setFontSize(uni.upx2px(34));
				_this.ctx.setFillStyle('#333');
				_this.ctx.fillText(nickname, 15,uni.upx2px(570) + top + 20);
				
				_this.ctx.setFontSize(uni.upx2px(28));
				_this.ctx.setFillStyle('#666');
				if(systemInfo.platform==='android'){
					_this.ctx.fillText(phone, 15,uni.upx2px(570) + top + 50);
				}else{
					_this.ctx.fillText(phone, 15,uni.upx2px(570) + top + 40);
				}
				
				_this.ctx.setFontSize(uni.upx2px(22));
				_this.ctx.setFillStyle('#999');
				if(systemInfo.platform==='android'){
					_this.ctx.fillText(_this.ViewDetails, 15, uni.upx2px(570) + top + 90);
				}else{
					_this.ctx.fillText(_this.ViewDetails, 15, uni.upx2px(570) + top + 70);
				}
				
				//延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw(false, () => {
						_this.save()
					});
				}, 600);
			},
			// 获取海报图片
			async getImageInfo({ imgSrc }) {
				uni.showLoading({
					title: '正在生成海报',
					mask: true
				})
				return new Promise((resolve, errs) => {
					if(imgSrc.indexOf('https')!=-1){
						uni.downloadFile({
							url: imgSrc,
							success:function(res){
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(image) {
										uni.hideLoading()
										resolve(image);
									},
									fail(err) {
										uni.hideLoading()
										uni.showToast({
											title: '生成失败，请退出重试',
											icon: 'none',
											duration: 1500
										})
										errs(err);
									}
								});
							}
						})
					}else{
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								uni.hideLoading()
								resolve(image);
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '生成失败，请退出重试',
									icon: 'none',
									duration: 1500
								})
								errs(err);
							}
						});
					}
				});
			},
			// 保存海报到相册
			save(){
				let _this = this
				uni.showLoading({
					title: '正在保存··',
					mask: true
				})
				uni.canvasToTempFilePath({
				  destWidth: _this.canvasW + 200,
				  destHeight: _this.canvasH + 300,
				  canvasId: 'CanvasID',
				  success: function(data) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: data.tempFilePath,
							success(saveRes) {
								uni.showToast({
									icon: 'none',
									title: '保存成功，请在相册中查看',
									duration: 1500
								})
							},
							fail(fail) {
								uni.hideLoading()
							}
						})
				  },
					fail: (fail) => {
						console.log(fail)
					}
				})
			},
			// 保存海报
			saveImg(img,nikename,phone){
				this.OnCanvas(img,nikename,phone)
			},
			// 删除海报
			delPoster(poster_id){
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '删除后不可恢复，是否删除此海报？',
					confirmText: '确定',
					success(res) {
						if(res.confirm){
							_this.$api.PosterDelate({poster_id: poster_id}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '删除成功',
									duration: 1500
								})
								setTimeout(() => {
									_this.page = 0
									_this.posterList = []
									_this.init()
								},1500)
							})
						}
					}
				})
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.init(this.page)
			}
		},
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 140rpx;
		/* #ifdef APP-PLUS */
		padding-bottom: 0;
		/* #endif */
	}
	.poster-list-main{
		.canvas{
			position: fixed;
			left: 100%;
			top: 0;
		}
		.btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			padding: 20rpx 75rpx;
			/* #ifdef APP-PLUS*/
			display: none;
			/* #endif */
			button{
				background-color: #2073F5;
				border-radius: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 36rpx;
			}
		}
	}
	.poster-list{
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.poster-list-item{
			position: relative;
			margin-bottom: 40rpx;
			width: calc((100% - 5px) / 2);
			button{
				margin: 30rpx 45rpx 0;
				background-color: #FFF;
				border: solid 1px #2073F5;
				color: #2073F5;
				border-radius: 30rpx;
				height: 58rpx;
				line-height: 58rpx;
				font-size: 24rpx;
			}
			button.del{
				color: #FF0000;
				border-color: #FF0000;
			}
			image.picture{
				width: 100%;
				background-color: #EEE;
				vertical-align: top;
			}
			.poster-item-info{
				display: flex;
				align-items: center;
				padding: 20rpx;
				background-color: #FFF;
				.poster-item-info-text{
					flex: 1;
					min-width: 0;
					.poster-list-item-tit{
						font-size: 24rpx;
					}
					.poster-list-item-phone{
						font-size: 20rpx;
						color: #666;
						margin-top: 10rpx;
					}
					.poster-list-item-tips{
						color: #999;
						font-size: 18rpx;
						margin-top: 25rpx;
						/* #ifdef H5 */
						font-size: 14rpx;
						transform: scale(.8);
						white-space: nowrap;
						margin-left: -12%;
						/* #endif */
					}
				}
				image.code{
					width: 120rpx;
					height: 120rpx;
					background-color: #EEE;
				}
			}
		}
	}
</style>
